<template>
  <Modal v-model="detailsPop" width="35" :closable="false" :mask-closable="false" class-name="vertical-center-modal">
    <div slot="header" class="pop-head">
      <div class="pop-tit">{{ $t('wayBill.cancel_pop_text') }}</div>
      <Icon type="md-close" size="26" color="#242424" class="close" @click="cancelMet()" />
    </div>
    <div class="content-sty">
      <div class="goods-info">
        <img :src="infoData.mainImg" class="img" alt="">
        <div class="right">
          <div class="name">{{ infoData.subject }}</div>
          <div class="spe-sty">
            <div>
              <div class="spe-text" v-for="attributeItem in infoData.skuAttrEnumFormatList" :key="attributeItem.id">
                {{ attributeItem.name }}：{{ attributeItem.value }}
              </div>
            </div>
            <div class="quantity-num">x {{ infoData.quantity }}</div>
          </div>
        </div>
      </div>
      <Divider />
      <div class="select-area">
        <div class="label-text">{{ $t('wayBill.extension_time') }}:</div>
        <Select v-model="form.quantity" style="width: 154px;" class="select-sty">
          <Option v-for="item in timeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="tip-text" v-html="$t('wayBill.tip_time_text', { amount: storageUnitPrice })"></div>
      <div class="sub-text">{{ $t('wayBill.det_text_tip') }}</div>
      <div class="amount-sty">
        {{ $t('wayBill.all_amount_text') }}:
        <span class="amount">￥ {{ bigTimes(form.quantity, storageUnitPrice) }}</span>
      </div>
    </div>
    <div slot="footer" class="pop-footer">
      <div></div>
      <div class="handle-sty">
        <div class="handle-btn" @click="cancelMet()">{{ $t('pay.cancel') }}</div>
        <div class="handle-btn confirm-btn" @click="confirmMet()">{{ $t('user.pay') }}</div>
      </div>
    </div>
  </Modal>
</template>
<script>
import { mapState } from "vuex";
import { bigTimes } from "@/common/digital-computation";
import { extendTime } from "@/api/expressOrder";
export default {
  data() {
    return {
      detailsPop: false,
      infoData: {},
      form: {
        quantity: 1
      },
      timeList: [
        {
          value: 1,
          label: this.$t('wayBill.num_month_text', { num: 1 })
        },
        {
          value: 2,
          label: this.$t('wayBill.num_month_text', { num: 2 })
        },
        {
          value: 3,
          label: this.$t('wayBill.num_month_text', { num: 3 })
        },
        {
          value: 4,
          label: this.$t('wayBill.num_month_text', { num: 4 })
        },
        {
          value: 5,
          label: this.$t('wayBill.num_month_text', { num: 5 })
        },
        {
          value: 6,
          label: this.$t('wayBill.num_month_text', { num: 6 })
        }
      ]
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      storageUnitPrice: (state) => state.config.config.storageUnitPrice
    })
  },
  methods: {
    bigTimes,
    open(info) {
      this.infoData = info;
      this.form.orderNo = info.id;
      this.detailsPop = true;
    },
    cancelMet() {
      this.detailsPop = false;
    },
    confirmMet() {
      extendTime(this.form).then((res) => {
        this.cancelMet();
        setTimeout(() => {
          this.$router.push(`/pay?id=${res.result.id}&&markText=diyRelevant`);
        }, 1000)
      })
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 12px;

  .ivu-modal-header {
    border: none;
    padding: 32px 32px 24px 32px;
  }

  .ivu-modal-body {
    padding: 0 32px;
  }

  .ivu-modal-footer {
    border: none;
    padding: 32px;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .pop-tit {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }

    .close {
      cursor: pointer;
    }
  }

  .content-sty {

    .goods-info {
      display: flex;

      .img {
        width: 120px;
        height: 120px;
        border-radius: 10px;
        object-fit: cover;
      }

      .right {
        margin-left: 20px;

        .name {
          font-weight: 500;
          font-size: 20px;
          color: #1E1714;
          line-height: 24px;
          white-space: pre-line;
          /*允许换行*/
          overflow: hidden;
          text-overflow: ellipsis;
          /*省略号*/
          display: -webkit-box;
          -webkit-box-orient: vertical;
          /*行向垂直排列*/
          -webkit-line-clamp: 2; //*限制2
        }

        .spe-sty {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          margin-top: 10px;

          .spe-text {
            font-size: 14px;
            margin-bottom: 10px;
            color: #767B93;
          }

          .quantity-num {
            font-weight: 500;
            font-size: 15px;
            color: #767B93;
            line-height: 18px;
            margin-right: 16px;
          }
        }
      }
    }

    .select-area {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;

      .select-sty {
        :deep(.ivu-select-selection) {
          height: 40px;
          padding-left: 12px;

          .ivu-select-selected-value {
            height: 40px;
            font-size: 18px;
          }

          .ivu-select-arrow {
            font-size: 18px;
          }
        }
      }

      .label-text {
        font-weight: 500;
        font-size: 18px;
        color: #222222;
        line-height: 20px;
      }
    }

    .tip-text {
      font-weight: 500;
      font-size: 16px;
      color: #767B93;
      line-height: 22px;
      margin-top: 12px;

      :deep(span) {
        color: #FF186B;
      }
    }

    .sub-text {
      font-weight: 500;
      font-size: 16px;
      color: #AEB0B9;
      line-height: 22px;
      margin-top: 24px;
    }

    .amount-sty {
      font-weight: 500;
      font-size: 16px;
      color: #222222;
      line-height: 22px;
      margin-top: 22px;

      .amount {
        font-weight: 600;
        font-size: 20px;
        color: #FF186B;
        line-height: 24px;
      }
    }
  }

  .pop-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .handle-sty {
      display: flex;
      align-items: center;
      gap: 24px;

      .handle-btn {
        min-width: 112px;
        padding: 12px 16px;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #E5E5E5;
        font-weight: 600;
        font-size: 16px;
        color: #1E1714;
        line-height: 19px;
        text-align: center;
        cursor: pointer;
      }

      .confirm-btn {
        background-color: #FF186B;
        color: #FFFFFF;
      }
    }
  }
}
</style>
